<template>
  <!-- 历史计划 -->
  <el-dialog title="历史计划" :visible.sync="showHistorical" width="70%" :before-close="closeHistoricalPlan" :close-on-click-modal="false">
    <div v-if="type == 1" class="m_title">资产：{{ name }}</div>
    <div v-else class="m_title">支出事项：{{ name }}</div>
    <el-table border ref="tableData" :data="tableData" style="width: 100%">
      <!-- <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.prop" header-align="center" :width="item.width ? item.width : null" :align="item.align ? item.align : null">
        <template slot-scope="scope">
          <div v-if="item.prop === 'createTime'">{{ scope.row.createTime | time }}</div>
          <div v-if="item.prop === 'forecastIncome'">
            {{ scope.row.forecastIncome | moneyFilter }}
          </div>
          <div v-if="item.prop === 'planType'">
            {{ scope.row.planType ? scope.row.planType : '' }}
          </div>
        </template>
      </el-table-column> -->
      <el-table-column prop="createTime" label="填报时间" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime | time }}
        </template>
      </el-table-column>
      <el-table-column prop="forecastIncome" label="填报金额" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.forecastIncome | moneyFilter }}
        </template>
      </el-table-column>
      <el-table-column prop="planType" label="计划事项" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.planType ? scope.row.planType : '-' }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import Api from '../../../api/incomeAndExpenditurePlan';
import dayjs from 'dayjs';
export default {
  props: {
    showHistorical: {
      type: Boolean,
      default: true,
    },
    // 区分支出计划的弹框
    type: {
      type: Number,
      default: 1,
    },
    //支出事项和资产类型
    name: {
      type: String,
      default: '',
    },
    assetCode:{
      type: String,
      default: '',
    }
  },

  data() {
    return {
      title: '',
      tableData: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      Api.historyProject({
        assetCode:this.assetCode,
      }).then(res => {
        this.tableData = res.rows;
      });
    },
    // 取消
    closeHistoricalPlan() {
      this.$emit('close-dialog', false);
    },
  },
  computed: {
    columns() {
      let align = 'center';
      let width = null;
      let columns = [
        {
          label: '填报时间',
          prop: 'createTime',
          align: align,
          width: width,
        },
        {
          label: '填报金额',
          prop: 'forecastIncome',
          align: align,
          width: width,
        },
        {
          label: '计划事项',
          prop: 'planType',
          align: align,
          width: width,
        },
      ];
    },
  },
  filters: {
    moneyFilter(money) {
      if (money && money !== null) {
        let m = money + '';
        var left = m.split('.')[0],
          right = m.split('.')[1];
        right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
        var temp = left
          .split('')
          .reverse()
          .join('')
          .match(/(\d{1,3})/g);
        return '¥' + temp.join(',').split('').reverse().join('') + right;
      } else if (money == 0) {
        return '00.0';
      } else {
        return '-';
      }
    },
    time(time) {
      return dayjs(time).format('YYYY-MM-DD');
    },
  },
};
</script>

<style lang="scss" scoped>
.m_title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
::v-deep .el-dialog {
  min-height: 400px;
  .el-dialog__header {
    background: #444;
  }
}
</style>
